import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Upload,
  Tooltip,
  InputNumber,
} from 'antd';

import ImageUploader from '../Attachment/ImageUploader';
import AttachmenTable from '../Attachment/AttachmentTable';
import { solo } from '../../../common/solo';

import styles from './CustomerExtendEditor.less';
import moment from 'moment';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    span: 24,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
@Form.create()
export default class CustomerExtendEditor extends PureComponent {
  constructor(props) {
    super(props);
  }

  hanleAttachmentChanged = (metaInfo, fileList, file) => {
    // console.log('hanleAttachmentChanged metaInfo',metaInfo);
    // console.log('hanleAttachmentChanged fileList',fileList);
    // console.log('hanleAttachmentChanged file',file);
  };

  handleAttachmentRemove = (fieldName, fileInfo) => {
    // console.log('handleAttachmentRemove fieldName',fieldName);
    // console.log('handleAttachmentRemove fileInfo111',fileInfo);
    // console.log('handleAttachmentRemove fileInfo222',fileInfo.key);
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/deleteFile',
      payload: {
        fileId: fileInfo.key,
      },
    });
  };

  calcAttachmentData = () => {
    const { customerId } = this.props;
    const customerInfo = {
      customerId,
    };
    const attachmentData = [
      {
        key: '1',
        name: '身份证正面',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'idcardFront',
        attachKind: '1111',
        maxCount: 1,
        files: [],
      },
      {
        key: '2',
        name: '身份证反面',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'idcardBack',
        attachKind: '1112',
        maxCount: 1,
        files: [],
      },
      {
        key: '3',
        name: '驾驶证',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'driver',
        attachKind: '1250',
        maxCount: 2,
        files: [],
      },
      {
        key: '4',
        name: '收入证明',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'income',
        attachKind: '1210',
        maxCount: 10,
        files: [],
      },
      {
        key: '5',
        name: '银行流水',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'bankStatement',
        attachKind: '1220',
        maxCount: 10,
        files: [],
      },
      {
        key: '6',
        name: '家访照片',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'homeVisit',
        attachKind: '1310',
        maxCount: 10,
        files: [],
      },
      {
        key: '7',
        name: '其他',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'other',
        attachKind: '1290',
        maxCount: 10,
        files: [],
      },
    ];
    const data = this.props.item;
    // console.log('calcAttachmentData',data);
    const { attachs } = data;

    return attachmentData.map((attachmentMetaInfo, index) => {
      const { fieldName } = attachmentMetaInfo;
      const imageKeyList = attachs[fieldName];
      if (!imageKeyList) {
        return attachmentMetaInfo;
      }
      const imageInfoList = imageKeyList.map(key => {
        return {
          key,
          url: `${solo.imgShow}${key}`,
          status: 'done',
          uid: key,
          name: key,
        };
      });
      attachmentMetaInfo.files = imageInfoList;
      return attachmentMetaInfo;
    });
  };

  participantAttachmentData = () => {
    const { customerId } = this.props;
    const customerInfo = {
      customerId,
    };
    const attachmentData = [
      {
        key: '1',
        name: '身份证正面',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'idcardFront',
        attachKind: '1111',
        maxCount: 1,
        files: [],
      },
      {
        key: '2',
        name: '身份证反面',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'idcardBack',
        attachKind: '1112',
        maxCount: 1,
        files: [],
      },
      // { key: '3', name: '驾驶证', projectInfo: this.props.projectInfo,customerInfo:customerInfo, fieldName: 'driver', attachKind: '1250', maxCount: 2, files: [] },
      {
        key: '4',
        name: '收入证明',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'income',
        attachKind: '1210',
        maxCount: 5,
        files: [],
      },
      {
        key: '5',
        name: '银行流水',
        projectInfo: this.props.projectInfo,
        customerInfo: customerInfo,
        fieldName: 'bankStatement',
        attachKind: '1220',
        maxCount: 5,
        files: [],
      },
      // { key: '6', name: '家访照片', projectInfo: this.props.projectInfo,customerInfo:customerInfo, fieldName: 'homeVisit', attachKind: '1310', maxCount: 10, files: [] },
      // { key: '7', name: '其他', projectInfo: this.props.projectInfo,customerInfo:customerInfo, fieldName: 'other', attachKind: '1290', maxCount: 10, files: [] },
    ];
    const data = this.props.item;
    // console.log('calcAttachmentData',data);
    const { attachs } = data;

    return attachmentData.map((attachmentMetaInfo, index) => {
      const { fieldName } = attachmentMetaInfo;
      const imageKeyList = attachs[fieldName];
      if (!imageKeyList) {
        return attachmentMetaInfo;
      }
      const imageInfoList = imageKeyList.map(key => {
        return {
          key,
          url: `${solo.imgShow}${key}`,
          status: 'done',
          uid: key,
          name: key,
        };
      });
      attachmentMetaInfo.files = imageInfoList;
      return attachmentMetaInfo;
    });
  };

  render() {
    const { risk, isForFamilyMember } = this.props;
    const { customers } = risk;
    const { apply } = this.props;
    const { applyListDetails } = apply;
    const { applyDisabled } = this.props;
    const customer = this.props.item;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    // console.log("customer", customer)
    return (
      <Form>
        <Row gutter={16}>
          <Col span={0}>
            <FormItem label="id" {...formItemLayout}>
              {getFieldDecorator('id', {
                initialValue: customer.id,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="客户姓名" {...formItemLayout}>
              {getFieldDecorator('custName', {
                initialValue: customer.custName,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="身份证" {...formItemLayout}>
              {getFieldDecorator('idcard', {
                initialValue: customer.idcard,
              })(<Input disabled />)}
            </FormItem>
          </Col>

          <Col span={8}>
            <FormItem label="联系电话" {...formItemLayout}>
              {getFieldDecorator('phone', {
                initialValue: customer.phone,
              })(<Input disabled />)}
            </FormItem>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={8}>
            <FormItem label="出生日期" {...formItemLayout}>
              {getFieldDecorator('birthday', {
                initialValue: moment(customer.birthday),
              })(<DatePicker style={{ width: '100%' }} disabled />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="性别" {...formItemLayout}>
              {getFieldDecorator('sex', {
                initialValue: customer.sex,
              })(
                <Select disabled>
                  <Option value={1}>男</Option>
                  <Option value={2}>女</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Divider style={{ margin: '16px 0' }} />
        <Row gutter={16}>
          {/* <Col span={8}>
            <FormItem label="户籍所在地" {...formItemLayout}>
              {getFieldDecorator('hometown', {
                initialValue: customer.residProvince + customer.residCity + customer.residCounty,
              })(<Input placeholder="请输入" disabled={applyDisabled} />)}
            </FormItem>
          </Col> */}
          <Col span={8}>
            <FormItem label="婚姻状况" {...formItemLayout}>
              {getFieldDecorator('maritalState', {
                initialValue: customer.maritalState,
              })(
                <Select disabled={applyDisabled}>
                  <Option value={1}>已婚</Option>
                  <Option value={2}>未婚</Option>
                  <Option value={3}>离异</Option>
                  <Option value={4}>丧偶</Option>
                  <Option value={5}>分居</Option>
                  <Option value={6}>其他</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="家庭住址" {...formItemLayout}>
              {getFieldDecorator('residDetail', {
                initialValue: customer.residDetail,
              })(<Input placeholder="请输入" disabled={applyDisabled} />)}
            </FormItem>
          </Col>

          <Col span={8}>
            <FormItem label="住宅类型" {...formItemLayout}>
              {getFieldDecorator('residState', {
                initialValue: customer.residState,
              })(
                <Select disabled={applyDisabled}>
                  <Option value={1}>自有住房</Option>
                  <Option value={2}>分期付款购房</Option>
                  <Option value={3}>租房</Option>
                  <Option value={4}>其他</Option>
                  <Option value={5}>集体宿舍</Option>
                  <Option value={6}>单位分配</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={8}>
            <FormItem label="单位地址" {...formItemLayout}>
              {getFieldDecorator('corpDetail', {
                initialValue: customer.corpDetail,
              })(<Input placeholder="请输入" disabled={applyDisabled} />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="职业" {...formItemLayout}>
              {getFieldDecorator('profession', {
                initialValue: customer.profession,
              })(
                <Select disabled={applyDisabled}>
                  <Option value={1}>公务员</Option>
                  <Option value={2}>学生</Option>
                  <Option value={3}>事业单位员工</Option>
                  <Option value={4}>其他行业职员</Option>
                  <Option value={5}>军人</Option>
                  <Option value={6}>自由职业者</Option>
                  <Option value={7}>工人</Option>
                  <Option value={8}>农民</Option>
                </Select>
              )}
            </FormItem>
          </Col>

          <Col span={8}>
            <FormItem label="工作单位" {...formItemLayout}>
              {getFieldDecorator('corp', {
                initialValue: customer.corp,
              })(<Input placeholder="请输入" disabled={applyDisabled} />)}
            </FormItem>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={8}>
            <FormItem label="学历" {...formItemLayout}>
              {getFieldDecorator('education', {
                initialValue: customer.education,
              })(
                <Select disabled={applyDisabled}>
                  <Option value={1}>未知</Option>
                  <Option value={2}>博士及以上</Option>
                  <Option value={3}>硕士研究生</Option>
                  <Option value={4}>大学本科</Option>
                  <Option value={5}>大学专科</Option>
                  <Option value={6}>中专</Option>
                  <Option value={7}>技校职高</Option>
                  <Option value={8}>高中</Option>
                  <Option value={9}>初中</Option>
                  <Option value={10}>小学及以下</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="月收入" {...formItemLayout}>
              {getFieldDecorator('monthIncome', {
                initialValue: customer.monthIncome,
              })(<InputNumber style={{ width: '100%' }} disabled={applyDisabled} />)}
            </FormItem>
          </Col>

          <Col span={8} />
        </Row>
        <AttachmenTable
          customerInfo={customer}
          projectInfo={this.props.projectInfo}
          data={
            customer.relation == 1 ? this.calcAttachmentData() : this.participantAttachmentData()
          }
          applyDisabled={applyDisabled}
          onAttachmentChanged={this.hanleAttachmentChanged}
          onAttachmentRemove={this.handleAttachmentRemove}
        />
      </Form>
    );
  }
}
